// 商品统计
import { Card, Table ,ConfigProvider} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useEffect,useState } from 'react';
import ReactEcharts from 'echarts-for-react';
import CardRightButton from './component/CardRightButton';
import {getStaShopTable1Api,getStaShopTable2Api  } from "@/api/statistics";
import {exportExcel} from '@/utils/tableToExcel'
import zh_CN from 'antd/es/locale/zh_CN';
interface DataType1 {
  id:number;
  categoryName: string;
  sale: string;
  rate: string;
  price: string;
  priceRate: string;
}
interface DataType2 {
  id:number;
  goodsName: string;
  look: string;
  lookPeople: string;
  payPeople: string;
  rate: string;
  price:string;
  saleNum:string;
}

const columns1: ColumnsType<DataType1> = [
  {
    title: '商品分类',
    dataIndex: 'categoryName',
    render: (text) => <span style={{color:'red'}}>{text}</span>,
  },
  {
    title: '销量（件）',
    dataIndex: 'sale',
  },
  {
    title: '占比',
    dataIndex: 'rate',
  },
  {
    title: '销售额（元）',
    dataIndex: 'price',
  },
  {
    title: '销售额占比',
    dataIndex: 'priceRate',
  },
];
const columns2: ColumnsType<DataType2> = [
  {
    title: '商品名称',
    dataIndex: 'goodsName',
    render: (text) => <span style={{color:'red'}}>{text}</span>,
  },
  {
    title: '浏览量',
    dataIndex: 'look',
  },
  {
    title: '浏览人数',
    dataIndex: 'lookPeople',
  },
  {
    title: '付款人数',
    dataIndex: 'payPeople',
  },
  {
    title: '单品转化率',
    dataIndex: 'rate',
  },
  {
    title: '销售数量',
    dataIndex: 'saleNum',
  },
  {
    title: '销售金额',
    dataIndex: 'price',
  },
];

const CardButton = [
  { label: '昨天', value: 'yesterday' },
  { label: '最近7天', value: 'late7' },
  { label: '最近30天', value: 'late30' },
];
const initButtonValue = 'yesterday'


export default function ShopStatistics() {
  const [option1Data,setOption1Data] = useState([
    { value: 12, name: '男士' },
    { value: 55, name: '女士' },
    { value: 33, name: '童装' },
    { value: 21, name: 'OUTLETS' },
    { value: 8, name: '双肩背包' },
    { value: 3, name: '超轻背包' },
  ])
  const [tableData1,setTableData1] = useState([])
  const [tableData2,setTableData2] = useState([])
  const [page,setPage] = useState({pageNum:1,pageSize:5,total:10})
  const [date,setDate] = useState('yesterday')
  // const getEchartData1 = async(val:string)=>{
  //   const {data:{echartData}} = await getStaShopEchart1Api(val)
  //   setOption1Data(echartData)
  // }
  const getEchartData1 = (val:any)=>{
    let arr = val.map((item:any)=>{
      let obj = {
        value:'',
        name:''
      }
      obj.name = item.categoryName
      obj.value = item.sale
      return obj
    })
    setOption1Data(arr)
  }
  const gettableData1 = async(val:{})=>{
    const {data} = await getStaShopTable1Api(val)
    const tableData = data.map((item:any,index:number)=>{
      item.id = index+1
      return item
    })
    getEchartData1(data)
    setTableData1(tableData)
  }
  const gettableData2 = async(val:{})=>{
    const {data} = await getStaShopTable2Api(val)
    setPage((state :any)=>{
      return {...state,total:data.size}
    })
    const tableData = data.sales.map((item:any,index:number)=>{
      item.id = index+1
      return item
    })
    setTableData2(tableData)
  }
  useEffect(()=>{
    // getEchartData1('yesterday')
    gettableData1({time:'yesterday'})
    gettableData2({time:'yesterday',pageNum:1,pageSize:5})
  },[])
  const outPut1 = ()=>{
    exportExcel('table1','商品类目销售分析表')
  }
  const outPut2 = ()=>{
    exportExcel('table2','商品销售明细表')
  }
  const changeButton1 = (val :any)=>{
    // getEchartData1(val)
    gettableData1({time:val})
  }
  const changeButton2 = (val :any)=>{
    gettableData2({time:val,pageNum:page.pageNum,pageSize:page.pageSize})
    setDate(val)
  }

  const getOption1 = ()=>{
    const option = {
      title: {
        text: '一级商品分类',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          type: 'pie',
          radius: '50%',
          data: option1Data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          label:{ 
            show: true, 
            //formatter: '{b} : {c} ({d}%)' //带当前图例名 + 百分比
            formatter: '{b} : {d}%' //只要百分比
          }, 
          labelLine :{show:true}
        }
      ]
    }
    return option
  }
  //分页
  const paginationChange = (current:number,size:number)=>{
    setPage((state :any)=>{
      return {pageNum:current,pageSize:size,total:state.total}
    })
    gettableData2({time:date,pageNum:current,pageSize:size})
  }
  return (
    <div className="shopStatistics">
      <p className="head">商品统计</p>
      <Card title="商品类目销售分析" type="inner" style={{ marginTop:'20px'}} extra={<CardRightButton optionsWithDisabled={CardButton} initButtonValue={initButtonValue} derive={true} deriveClick={outPut1} changeButton={changeButton1}></CardRightButton>}>
      <ReactEcharts option={getOption1()} notMerge={true}></ReactEcharts>
      <Table id={'table1'} columns={columns1} dataSource={tableData1} style={{ marginTop:'20px'}} pagination={false} 
      rowKey = {val=> val.id} />
      </Card>
      <Card title="商品销售明细" type="inner" style={{ marginTop:'20px'}} extra={<CardRightButton optionsWithDisabled={CardButton} initButtonValue={initButtonValue} derive={true} deriveClick={outPut2} changeButton={changeButton2}></CardRightButton>}>
      <ConfigProvider locale={zh_CN}>
      <Table id={'table2'} columns={columns2} dataSource={tableData2} style={{ marginTop:'20px'}} 
      rowKey = {val=> val.id} pagination={{
        position: ['bottomCenter'],
        defaultPageSize: 5,
        pageSizeOptions: [2, 5, 10, 15],
        showQuickJumper: true,
        showSizeChanger: true,
        onChange: paginationChange,
        total:10
      }} />
      </ConfigProvider>
      </Card>
    </div>
  )
}